<template>
	<div class="absolute">
		<edu-popup @closed="resetHandle" :visible.sync="show" @confirm="confirmHandle" @close="cancelHandle"
			:title="title">
			<view class="edu-date-picker-wrapper">
				<picker-view :indicator-style="indicatorStyle" :value="yearValue" @change="bindChange($event,1)"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in yearOption" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
				<div class="date-picker-text">
					<text class="text-value">年</text>
				</div>
				<picker-view :indicator-style="indicatorStyle" :value="monthValue" @change="bindChange($event,2)"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in monthOption" :key="index">{{ item.label }}</view>
					</picker-view-column>
				</picker-view>
				<div class="date-picker-text">
					<text class="text-value">月</text>
				</div>
				<picker-view :indicator-style="indicatorStyle" :value="dayValue" @change="bindChange($event,3)"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in dayOption" :key="index">{{ item.label }}</view>
					</picker-view-column>
				</picker-view>
				<div class="date-picker-text end">
					<text class="text-value">日</text>
				</div>
			</view>
		</edu-popup>
	</div>
</template>

<script>
	import { patchZero } from "@/utils/tool";

	export default {
		name: "EduDatePicker",
		props: {
			title: {
				type: String,
				default: () => ''
			}
		},
		data() {
			return {
				indicatorStyle: `height: 38px;`,
				show: false,
				yearValue: [0],
				monthValue: [0],
				dayValue: [0],
			};
		},
		emits: ['confirm'],
		computed: {
			monthOption() {
				const result = []
				for (let i = 1; i < 13; i++) {
					result.push({
						label: patchZero(i),
						value: i
					})
				}
				return result
			},
			yearOption() {
				const result = []
				let i = 1900
				const end = new Date().getFullYear()
				while (i <= end) {
					result.push(i);
					i++;
				}
				return result
			},
			dayOption() {
				const [yearIndex] = this.yearValue
				const [monthIndex] = this.monthValue
				const monthTarget = this.monthOption[monthIndex]
				const [year, month] = [this.yearOption[yearIndex], monthTarget.value]
				const [dayStart, dayEnd] = this.getDay(year, month)
				const result = []
				for (let i = dayStart; i <= dayEnd; i++) {
					result.push({
						label: patchZero(i),
						value: i
					})
				}
				return result
			},
		},
		methods: {
			resetHandle() {
				this.resolveFunc && (this.resolveFunc = null)
			},
			cancelHandle() {
				this.show = false
				this.resolveFunc && this.resolveFunc([true, null])
			},
			getDate() {
				const [yearIndex] = this.yearValue
				const [monthIndex] = this.monthValue
				const [dayIndex] = this.dayValue
				const { yearOption, monthOption, dayOption } = this
				const monthTarget = monthOption[monthIndex]
				const dayTarget = dayOption[dayIndex]
				return [yearOption[yearIndex], monthTarget.label, dayTarget.label]
			},
			confirmHandle() {
				const result = this.getDate()
				this.resolveFunc && this.resolveFunc([null, result.join('-')])
				this.show = false
			},
			getCurrentDateAndInit(v) {
				const date = v ? new Date(v) : new Date()
				const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
				this.yearValue = [this.yearOption.indexOf(year)]
				const monthIndex = this.monthOption.findIndex(item => item.value === month)
				this.monthValue = [Math.max(0, monthIndex)]
				const dayIndex = this.dayOption.findIndex(item => item.value === day)
				this.dayValue = [Math.max(0, dayIndex)]
			},
			getDay(year, month) {
				const firstDate = new Date(year, month - 1, 1)
				const lastDate = new Date(year, month, 0)
				return [firstDate.getDate(), lastDate.getDate()]
			},
			open(v) {
				return new Promise(resolve => {
					this.show = true
					this.resolveFunc = resolve
					this.getCurrentDateAndInit(v)
				})
			},
			bindChange(e, t) {
				const val = e.detail.value
				if (t === 1) return this.yearValue = val
				if (t === 2) return this.monthValue = val
				return this.dayValue = val
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edu-date-picker-wrapper {
		display: flex;
		flex-flow: row nowrap;
		width: 100%;
		box-sizing: border-box;
		position: relative;

		.date-picker-text {
			height: 400rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 32rpx;
			color: #2b2b2b;
			font-size: 30rpx;

			&.end {
				margin-right: 0;
			}
		}

		.picker-view {
			width: 200rpx;
			height: 400rpx;
		}

		.item {
			line-height: 38px;
			text-align: center;
			color: #2b2b2b;
			font-size: 32rpx;
		}
	}
</style>